<template>
	<view class="nas-archived-content">
		<scroll-view scroll-y="true" class="nas-archived-scroll" @scrolltolower="scrolltolower">
			<!-- <view class="nas-archived-top" @click="openSelect">{{ hasSelect }}（{{ total }}）</view> -->
			<view style="width:260rpx;margin-left: 20rpx; margin-top: 26rpx; display: flex;align-items: center; color: #999999;">
				<nas-select
					:list="columns"
					:clearable="false"
					:showItemNum="5"
					:listShow="false"
					:isCanInput="false"
					:style_Container="listBoxStyle"
					:placeholder="'placeholder'"
					:initValue="hasSelect"
					:selectHideType="'independent'"
					@change="change"
				></nas-select>
				（{{ total }}）
			</view>
			<view class="nas-archived-body-item" v-for="(item, index) in fileList" :key="index" :class="{ active: item.select }">
				<view class="nas-archived-body-image"><image :src="getFileType(item.name)" mode=""></image></view>
				<view class="nas-archived-body-left-right">
					<view>{{ item.name }}</view>
					<view>{{ item.createTime }}</view>
				</view>
				<view class="nas-archived-body-right-circle" @click.stop="hasSelectFile(item)">
					<view
						v-if="hasSelect === '全部'"
						class="status"
						:class="{ status0: item.status == 0, status1: item.status == 1, status2: item.status == 2, status3: item.status == 3, status4: item.status == 4 }"
					>
						{{ getName(item.status) }}
					</view>
					<image v-if="!item.select" src="../../../../static/nas-static/nas-radio-none.svg" mode=""></image>
					<image v-if="item.select" src="../../../../static/nas-static/nas-radio-yes.svg" mode=""></image>
				</view>
			</view>
			<view class="nas-nomore">无更多数据～</view>
		</scroll-view>
		<!-- 更多操作 -->
		<view class="nas-archived-bottom" v-if="showBottomMore">
			<view class="nas-archived-bottom-item" @click="dealBottom">
				<image class="nas-archived-bottom-img" src="../../../../static/nas-static/nas-delete.svg"></image>
				<view>删除</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from '../../utils/request.js';
import nasSelect from '../nas-select/nas-select.vue';
export default {
	components: {
		nasSelect
	},
	props: {
		type: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			content: '',
			fileList: [],
			hasSelectFileList: [], //选中的文件
			showBottomMore: false,
			currentPage: 1,
			total: null,
			listBoxStyle: `height: 42rpx; font-size: 24rpx;`,
			columns: ['全部', '未开始', '转存中', '转存成功', '转存失败', '部分成功'],
			hasSelect: '全部'
		};
	},
	mounted() {
		this.getInfos();
	},
	methods: {
		async getInfos() {
			let data = {
				pageNum: this.currentPage,
				pageSize: 20,
				status: this.getStatus(this.hasSelect)
			};
			if (this.hasSelect === '全部') {
				delete data.status;
			}
			const params = {
				method: 'GET',
				url: '/nas/transfer/list',
				data: data
			};
			console.log(params, '转存的请求params');
			const res = await request(params);
			console.log(res.data.list, '转存的结果');
			this.total = res.data.total;
			res.data.list.forEach(val => (val.select = false));
			this.fileList = this.fileList.concat(res.data.list);
			// console.log(this.fileList, 'this.fileList');
		},
		change(e) {
			console.log(e, 'eeeee');
			this.hasSelect = e.newVal;
			this.currentPage = 1;
			this.fileList = [];
			this.$emit('showTopMore', 0);
			this.allCancel();
			this.getInfos();
		},
		getStatus(name) {
			let status = '';
			switch (name) {
				case '全部':
					status = '';
					break;
				case '未开始':
					status = 0;
					break;
				case '转存中':
					status = 1;
					break;
				case '转存成功':
					status = 2;
					break;
				case '转存失败':
					status = 3;
					break;
				case '部分成功':
					status = 4;
					break;
				default:
					break;
			}
			return status;
		},
		getName(name) {
			const names = name + '';
			let status = '';
			switch (names) {
				case '0':
					status = '未开始';
					break;
				case '1':
					status = '转存中';
					break;
				case '2':
					status = '转存成功';
					break;
				case '3':
					status = '转存失败';
					break;
				case '4':
					status = '部分成功';
					break;
				default:
					break;
			}
			return status;
		},
		// 判断是否存在选中的文件
		hasSelectFile(item) {
			item.select = !item.select;
			this.hasSelectFileList = this.fileList.filter(val => val.select);
			if (this.hasSelectFileList.length > 0) {
				this.showBottomMore = true;
				this.$emit('showTopMore', this.hasSelectFileList.length);
			} else {
				this.showBottomMore = false;
				this.$emit('showTopMore', this.hasSelectFileList.length);
			}
		},
		// 删除操作
		async dealBottom() {
			const ids = this.hasSelectFileList.map(val => val.id);
			const params = {
				method: 'POST',
				url: '/nas/transfer/delete',
				data: {
					ids: ids
				}
			};
			console.log(params, '删除的params');
			const res = await request(params);
			this.showBottomMore = false;
			this.$emit('showTopMore', 0);
			this.fileList = [];
			this.getInfos();
		},
		scrolltolower() {
			if (this.total <= 20) return;
			// console.log('触发底部的操作');
			this.currentPage = this.currentPage + 1;
			this.getInfos();
		},
		// 取消选择
		allCancel() {
			this.fileList.forEach(val => (val.select = false));
			this.showBottomMore = false;
		},
		// 全选
		allSelect() {
			this.fileList.forEach(val => (val.select = true));
		},
		// 判断文件的类型
		getFileType(filename) {
			let previewUrl = '';
			let arr = filename.split('.');
			let len = arr.length;
			let ext = arr[len - 1].toLocaleLowerCase();
			if (ext == 'mp3') {
				// 音频
				previewUrl = '/static/nas-static/nas-new-music.png';
			}
			if (ext == 'doc' || ext == 'docx') {
				previewUrl = '/static/nas-static/nas-new-file.png';
			}
			if (ext == 'ppt' || ext == 'pptx') {
				previewUrl = '/static/nas-static/nas-new-file.png';
			}
			if (ext == 'pdf') {
				previewUrl = '/static/nas-static/nas-new-file.png';
			}
			if (ext == 'rar' || ext == 'zip' || ext == '7z' || ext == 'gz') {
				previewUrl = '/static/nas-static/nas-zip.svg';
			}
			if (ext == 'xls' || ext == 'xlsx') {
				previewUrl = '/static/nas-static/nas-new-file.png';
			}
			if (ext == 'txt') {
				previewUrl = '/static/nas-static/nas-new-file.png';
			}
			if (ext == 'mp4' || ext == 'mov') {
				previewUrl = '/static/nas-static/nas-new-video.png';
			}
			if (ext == 'jpg' || ext == 'png' || ext == 'jpeg') {
				previewUrl = '/static/nas-static/nas-new-pic.png';
			}
			if (previewUrl) {
				return previewUrl;
			} else {
				return '/static/nas-static/nas-new-pic.png';
			}
		},
		//计算文件的大小
		dealSize: num => {
			if (!num) return '0B';
			let k = 1024; //设定基础容量大小
			let sizeStr = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; //容量单位
			let i = 0; //单位下标和次幂
			for (let l = 0; l < 8; l++) {
				//因为只有8个单位所以循环八次
				if (num / Math.pow(k, l) < 1) {
					//判断传入数值 除以 基础大小的次幂 是否小于1，这里小于1 就代表已经当前下标的单位已经不合适了所以跳出循环
					break; //小于1跳出循环
				}
				i = l; //不小于1的话这个单位就合适或者还要大于这个单位 接着循环
			}
			//例： 900 / Math.pow(1024, 0)  1024的0 次幂 是1 所以只要输入的不小于1 这个最小单位就成立了；
			//   900 / Math.pow(1024, 1)  1024的1次幂 是1024  900/1024 < 1 所以跳出循环 下边的 i = l；就不会执行  所以 i = 0； sizeStr[0] = 'B';
			//   以此类推 直到循环结束 或 条件成立
			return (num / Math.pow(k, i)).toFixed(2) + sizeStr[i]; //循环结束 或 条件成立 返回字符
		}
	}
};
</script>

<style lang="scss" scoped>
.nas-archived-content {
	.nas-archived-top {
		font-family: HarmonyOS_Sans_SC;
		font-size: 24rpx;
		margin-top: 60rpx;
		margin-left: 32rpx;
		color: #999999;
	}
	position: absolute;
	top: 90rpx;
	bottom: 0;
	right: 0;
	left: 0;
	overflow-y: scroll;
	.nas-nomore {
		height: 160rpx;
		display: flex;
		justify-content: center;
		font-size: 22rpx;
	}
	.nas-archived-scroll {
		position: absolute;
		top: 0rpx;
		bottom: 0;
		right: 0;
		left: 0;
		overflow-y: scroll;
	}
}
.nas-archived-bottom {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 150rpx;
	background: #3069dc;
	border-radius: 16rpx;
	padding-top: 20rpx;
	display: flex;
	justify-content: space-around;
	.nas-archived-bottom-item {
		width: 84rpx;
		font-family: HarmonyOS_Sans_SC;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.9);
		text-align: center;
		font-weight: 500;
		.nas-archived-bottom-img {
			width: 32rpx;
			height: 36rpx;
		}
	}
}
.nas-archived-body-item {
	padding: 26rpx 32rpx 26rpx 32rpx;
	// height: 130rpx;
	display: flex;
	align-items: center;
	&.active {
		background-color: rgba(246, 236, 236, 0.3);
	}
	.nas-archived-body-image {
		display: flex;
		align-items: center;
		image {
			width: 62rpx;
			height: 62rpx;
		}
	}
	.nas-archived-body-left-right {
		margin-left: 16rpx;
		view {
			max-width: 480rpx;
			&:first-of-type {
				font-family: HarmonyOS_Sans_SC;
				font-size: 28rpx;
				color: #333333;
				letter-spacing: 0;
				font-weight: 400;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			&:last-of-type {
				font-family: HarmonyOS_Sans_SC;
				font-size: 24rpx;
				color: #999999;
				letter-spacing: 0;
				font-weight: 400;
			}
		}
	}
	.nas-archived-body-right-circle {
		margin-left: auto;
		// width: 38rpx;
		display: flex;
		align-items: center;
		height: 38rpx;
		image {
			width: 38rpx;
			height: 38rpx;
		}
	}
	.status {
		margin-right: 40rpx;
		border-radius: 10rpx;
		height: 46rpx;
		font-size: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 14rpx;
		color: #ffffff;
		&.status0 {
			background-color: #E0E0E0;
		}
		&.status1 {
			background-color: #006fff;
		}
		&.status2 {
			background-color: #58c16b;
		}
		&.status3 {
			background-color: #ff0202;
		}
		&.status4 {
			background-color: #e49449;
		}
		
	}
}
</style>
